<%-- 
    Document   : showAdmin
    Created on : Mar 9, 2011, 8:28:54 PM
    Author     : Nguyen Viet Dung
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%
int year = 2011;
String status = "=5";
try {
    year = Integer.parseInt(request.getParameter("ddlYear"));
    status = request.getParameter("ddlStatus");
} catch(Exception ex) { }
%>
<div class="section table_section">
    <!--[if !IE]>start title wrapper<![endif]-->
    <div class="title_wrapper">
        <h2>
         <form name="frmYear" action="?option=statistics&action=servicesInYear" method="post" >
            Statistics Serivces In The Year
         :<select name="ddlYear" onchange="this.form.submit()">
            <option value="2010">2010</option>
            <option value="2011" selected>2011</option>
            <option value="2012">2012</option>
            <option value="2013">2013</option>
            <option value="2014">2014</option>
            <option value="2015">2015</option>
            <option value="2016">2016</option>
            <option value="2017">2017</option>
            <option value="2018">2018</option>
            <option value="2019">2019</option>
            <option value="2020">2020</option>
            </select>
         Based On :
         <select name="ddlStatus" onchange="this.form.submit()">
             <option value=">0" >All the bills</option>
             <option value=">1" >All the bills have been accpect onwards</option>
             <option value=">2" >All the bills have been paid onwards</option>
             <option value=">3" >All the bills have been on-going onwards</option>
             <option value="=5" selected>All the bills have been Completed</option>
             <option value="=1" >All the bills have been Reject</option>
            </select>
        </form>
         </h2>

        <script>document.frmYear.ddlYear.value = <%=year %>; document.frmYear.ddlStatus.value = '<%=status %>';</script>
        <!--[if !IE]>start section menu<![endif]-->
        <ul class="section_menu">
            <li></li>
            <li><a href="javascript:window.location.href='?option=statistics';" class="active"><span><span>GO BACK</span></span></a></li>
            <li></li>
            <li></li>
        </ul>
        <!--[if !IE]>end section menu<![endif]-->

        <span class="title_wrapper_left"></span>
        <span class="title_wrapper_right"></span>
    </div>
    <!--[if !IE]>end title wrapper<![endif]-->

    <!--[if !IE]>start section content<![endif]-->
    <div class="section_content">
        <!--[if !IE]>start section content top<![endif]-->
        <div class="sct">
            <div class="sct_left">
                <div class="sct_right">
                    <div class="sct_left">
                        <div class="sct_right">
                            <!--[if !IE]>start table_wrapper<![endif]-->
                            <div class="table_wrapper">
                                <div class="table_wrapper_inner">
                                <div id="container">
                                    <!------------------------------------------------->
                                    <!------------------------------------------------->
                                    <!------------------------------------------------->
                                    

                                    <script type="text/javascript" src="js/report-jquery.min.js"></script>
                                    <script type="text/javascript" src="js/highcharts.js"></script>
                                    <!--[if IE]>
                                            <script type="text/javascript" src="js/excanvas.compiled.js"></script>
                                    <![endif]-->

                                    <!-- 2. Add the JavaScript to initialize the chart on document ready -->

                                    <%
                                    java.sql.Connection connection = (java.sql.Connection)application.getAttribute("APP_CONN");
                                    java.util.ArrayList<org.nvdung.bean.StatisticService> al = (new org.nvdung.db.SqlStatistic(connection)).getServiceByYear(year,status);
                                    
                                    %>

                                    <script type="text/javascript">
                                    $(document).ready(function() {
                                            var chart = new Highcharts.Chart({
                                                    chart: {
                                                            renderTo: 'container1',
                                                            defaultSeriesType: 'column',
                                                            margin: [ 50, 50, 100, 80]
                                                    },
                                                    title: {
                                                            text: 'Turnover Of Service In Year <%=year %>'
                                                    },
                                                    xAxis: {
                                                            categories: [
                                                                
                                                                <% for(int i=0;i<al.size();i++) { %>
                                                                <%= "'" + al.get(i).getServiceName() + "'," %>
                                                                <% } %>
                                                                    
                                                            ],
                                                            labels: {
                                                                    rotation: -45,
                                                                    align: 'right',
                                                                    style: {
                                                                             font: 'normal 13px Verdana, sans-serif'
                                                                    }
                                                            }
                                                    },
                                                    yAxis: {
                                                            min: 0,
                                                            title: {
                                                                    text: 'Total Price (USD)'
                                                            }
                                                    },
                                                    legend: {
                                                            enabled: false
                                                    },
                                                    tooltip: {
                                                            formatter: function() {
                                                                    return '<b>'+ this.x +'</b><br/>'+
                                                                             'Serivce in <%=year %>: '+ Highcharts.numberFormat(this.y, 1) +
                                                                             ' USD';
                                                            }
                                                    },
                                                    series: [{
                                                            name: 'Service',
                                                            data: [
                                                                <% for(int i=0;i<al.size();i++) { %>
                                                                <%= al.get(i).getTotalPrice() + "," %>
                                                                <% } %>
                                                                ],
                                                            dataLabels: {
                                                                    enabled: true,
                                                                    rotation: -90,
                                                                    color: '#FFFFFF',
                                                                    align: 'right',
                                                                    x: 15,
                                                                    y: 10,
                                                                    formatter: function() {
                                                                            return this.y;
                                                                    },
                                                                    style: {
                                                                            font: 'normal 13px Verdana, sans-serif'
                                                                    }
                                                            }
                                                    }]
                                            });


                                    });
                                    </script>



                                    <div id="container1" style="width: 800px; height: 400px; margin: 0 auto"></div>


                                    <!------------------------------------------------->
                                    <!------------------------------------------------->
                                    <!------------------------------------------------->
                                </div>
                                </div>
                            </div>
                            <!--[if !IE]>end table_wrapper<![endif]-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--[if !IE]>end section content top<![endif]-->
        <!--[if !IE]>start section content bottom<![endif]-->
        <span class="scb"><span class="scb_left"></span><span class="scb_right"></span></span>
        <!--[if !IE]>end section content bottom<![endif]-->
    </div>
    <!--[if !IE]>end section content<![endif]-->
</div>